<template>
	<m-layout2 class="layout-box flex-column" title="地址" gap="24">
		<uni-swipe-action ref="action" class="mb-48">
			<m-block gap="0" spa="0 0 16" v-for="(item,index) in addressList">
				<uni-swipe-action-item @click="(res)=>{Delete(res,item)}" :right-options="options">
					<view class="block_item flex-between" @click="select(item.id)">
						<view>
							<view class="h1">{{item.are}}</view>
							<view class="h2">{{item.useraddress}}</view>
							<view class="h3 flex">
								<view class="name">
									<text>{{item.username}}</text>
								</view>
								<view class="phone">
									<text>{{item.userphone}}</text>
								</view>
								<template v-if="item.isdefualt==1">
									<uni-tag text="默认" type="error" size="mini"></uni-tag>
								</template>
								<template v-if="item.tag">
									<uni-tag :text="item.tag" type="primary" size="mini"></uni-tag>
								</template>
							</view>
						</view>
						<view @click.stop="Jump('/pages/mine/address/editor_address/editor_address?id='+item.id)">
							<m-icon size="36" color="#C0C0C0" type="icon-bianji"></m-icon>
						</view>
					</view>
				</uni-swipe-action-item>
			</m-block>
		</uni-swipe-action>
		<m-empty :list="addressList" icon="address_empty"></m-empty>
		<!-- 缺省页 -->
		<m-block class="footer" slot="footer" gap="24">
			<m-button @click="Jump('/pages/mine/address/editor_address/editor_address')">
				添加地址
			</m-button>
		</m-block>
	</m-layout2>
</template>

<script>
	import { GetMyAddress, DelAddress } from "@/api/Users.js"
	import store from '@/store'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				list: [],
				isLoading: false,
				isSelect: false, // 是否选择地址
				isChange: false, // 是否选择地址
				isSet: false, // 合伙人是否设置地址
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			};
		},
		computed: {
			...mapState({
				nowId: state => state.address.nowId,
				addressList: state => state.address.addressList,
				// addressObj: state => state.address.addressObj,
			})
		},
		onLoad({ isSelect, isChange, isSet }) {
			this.isSet = isSet || false;
			if (isSelect) this.isSelect = isSelect;
			this.isChange = isChange || false;
		},
		onShow() {
			GetMyAddress();
		},
		methods: {
			select(id) {
				console.log('id====>', id)
				if (this.isSelect) {
					this.$store.commit('address/SET_NOWID', id)
					this.Jump()
					return
				}
				if (this.isChange) {
					this.$store.commit('address/SET_OEDERADDRESS', id)
					this.Jump()
					return
				}
				if (this.isSet) {
					this.$store.commit('address/SET_NOWID', id)
					this.$store.commit('address/SET_HAVESELECTEN',true)
					this.Jump()
					return
				}
				this.Jump('/pages/mine/address/editor_address/editor_address?id=' + id)
			},
			async Delete(res, item) {
				uni.showLoading();
				const { success, msg } = await DelAddress({
					id:item.id
				})
				uni.hideLoading();
				this.Toast(msg)
				if (success) {
					if(this.nowId==item.id)  this.$store.commit('address/SET_NOWID', 0)
					GetMyAddress()
				}
			},
			chooseAddress(info) {
				// 返回上一页
				this.Jump();
			},
		}
	}
</script>

<style lang="scss">
	.layout-box {
		box-sizing: border-box;
		position: relative;

		::v-deep .body {
			padding-bottom: 160rpx !important;
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			box-sizing: border-box;
		}
	}

	.block_item {
		padding: 23rpx 24rpx;
		border-bottom: 1rpx solid #F5F5F5;

		.h1 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.h2 {
			padding: 10rpx 0;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.h3 {
			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.phone {
				padding: 0 15rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.uni-tag+.uni-tag {
				margin-left: 10rpx;
			}

		}
	}

	.body {
		padding-bottom: 40rpx;
	}
</style>